#{extends 'admintemplate.html'/}
#{set title:'Admin Manager User'/}
#{set main_title:'User'/}
#{set sub_title:'Management'/}
#{set current_user:'active'/}
#{set 'moreScripts'}
#{/set}
<div class="span12">
	#{if users.size() !=0 }
		<table id="product-table">
		<tr>
			<th class="table-header-check"><a id="toggle-all" ></a> </th>
			<th class="table-header-repeat line-left minwidth-1"><a href="">Id</a>	</th>
			<th class="table-header-repeat line-left minwidth-1"><a href="">Nick Name</a></th>
			<th class="table-header-repeat line-left"><a href="">Email</a></th>
			<th class="table-header-repeat line-left"><a href="">Date Login</a></th>
			<th class="table-header-repeat line-left"><a href="">Admin</a></th>
			<th class="table-header-options line-left"><a href="">Options</a></th>
		</tr>
		#{list items: users, as:'user'}
			<tr>
				<td><input  type="checkbox"/></td>
				<td>${user?.id}</td>
				<td>${user?.nickName}</td>
				<td><a href="">${user.email}</a></td>
				<td>${user?.dateLogin.format('dd/MM/yyyy hh:mm:ss')}</td>
				<td class="admin_${user?.id}">${user.isAdmin.capAll()}</td>
				<td class="options-width">
				<a href="#" onClick="viewLightBox('${user?.email}', 'set admin', 'setAdmin', ${user?.id})" title="Admin" class="icon-3 info-tooltip">Admin</a>
				<a href="" title="Edit" class="icon-4 info-tooltip"></a>
				
				<div class="active_${user?.id}">
					<a href="#" onClick="viewLightBox('${user?.email}', 'de-active', 'deActiveUser', ${user?.id})" title="DeActive" class="icon-5 info-tooltip">De-Active</a>
				</div>
				<div class="deactive_${user?.id}">
					<a href="#" onClick="viewLightBox('${user?.email}', 'active', 'activeUser', ${user?.id})" title="Active" class="icon-2 info-tooltip">Active</a>
				</div>	
				
				#{if user?.isActive}
					<script type="text/javascript">
						divActive = ".active_${user?.id}";
						divDeActive = ".deactive_${user?.id}";
						jQuery(divActive).show();
						jQuery(divDeActive).hide();
					</script>
				#{/if}
				#{else}
					<script type="text/javascript">
						divActive = ".active_${user?.id}";
						divDeActive = ".deactive_${user?.id}";
						jQuery(divActive).hide();
						jQuery(divDeActive).show();
					</script>
				#{/else}
				</td>
			</tr>
		#{/list}
		#{pagination paginationInfo /}
		</table>
	#{/if}
	#{else}
		KhÃ´ng cÃ³ ngÆ°á»�i dÃ¹ng nÃ o
	#{/else}
</div>
	<script type="text/javascript">
		function activeUser(id){
			jQuery.ajax({
			  url: '/admin/activeUser/' + id,
			  success: function(rs) {
				  if(rs == "true"){
					  divActive = ".active_" + id;
					  divDeActive = ".deactive_" + id;
					  jQuery(divActive).show();
					  jQuery(divDeActive).hide();
					  alertSuccessActionContent(id, "Actived");
				  }				  
			  }
			});
		}

		
		function deActiveUser(id){
			jQuery.ajax({
			  url: '/admin/deActiveUser/' + id,
			  success: function(rs) {
				  if(rs == "true"){
					  divActive = ".active_" + id;
					  divDeActive = ".deactive_" + id;
					  jQuery(divActive).hide();
					  jQuery(divDeActive).show();
					  alertSuccessActionContent(id, "Deactived");
				   }
			  }
			});
		}

		function alertSuccessActionContent(id, info){
			html ="<tbody><tr><td class='yellow-left'>You " + info + " User Id " + id + " Success</td>" + 
			"<td class='yellow-right'><a class='close-yellow'>Close</a></td></tr></tbody>";
			jQuery("#message-yellow table").html(html);	
			closeLightBox();
		}

		function setAdmin(id){
			jQuery.ajax({
			  url: '/admin/setAdmin/' + id,
			  success: function(rs) {
				  if(rs == "true"){
					  alertSuccessActionContent(id, "Set Admin");
					  setFieldAdmin(id);
				  }				  
			  }
			});
		}

		function setFieldAdmin(id){
			html ="True";
			divAdmin = ".admin_" + id;
			closeLightBox();
			jQuery(divAdmin).html(html);	
			
		}

		function viewLightBox(email, info, action, id){
			jQuery("#modal-from-dom").modal({
				show: true, 
				backdrop: 'static',
				keyboard: true
			})
			actionValue = action + "(" + id + ")";
			header = "<a href='#' class='close'>&times;</a><h3>Manager User</h3>";
			body = "<p>You want " + info + " user " + email + "</p>";
			footer = "<a href='#' onclick='closeLightBox()' class='btn secondary'>Close</a>" + "<a href='#'onclick='" + actionValue + "' class='btn primary'>Submit</a>";
			jQuery("#modal-from-dom .modal-header").html(header);
			jQuery("#modal-from-dom .modal-body").html(body);
			jQuery("#modal-from-dom .modal-footer").html(footer);
			return true;
		}

		function closeLightBox(){
			jQuery("#modal-from-dom").modal('hide');
		}
	</script>
<!--  end content -->
#{if users.size() !=0 }
<div id="modal-from-dom" class="modal hide fade">
      <div class="modal-header">
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
      </div>
</div>
#{/if}